<script setup lang="ts">
import { filterUser, AdminUpdateRank, UserSpecificID, AdminUpdateActive } from '../../../http/api'
import { onMounted, reactive, ref } from 'vue';
import pagination from '../../../components/pagination/index.vue'
import Cookies from 'js-Cookie';
import { ElMessage } from 'element-plus'


const super_admin = Cookies.get("super_admin")
onMounted(() => {
  filter(1)
})

const data = reactive({ data: [], total_pages: 0, total_records: 0 }) as any
interface User {
  id: number | undefined,
  tag: string,
  user_type?: number,
  index: number,
  is_active: boolean,
  age: number,
  sex: string,
  school: string,
  grade: string,
  class: string,
  headteacher: string,
  name: string,
  phone: string
}

const filter = (val: number) => {
  paginationFlag.value = true
  filterUser(val, 5).then((res: any) => {
    res.data.map((x: any) => {
      if (x.super_admin) x.tag = "超级管理员"
      else if (x.high_admin) x.tag = "市级管理员"
      else if (x.mid_admin) x.tag = "区级管理员"
      else x.tag = "普通用户"
      x.active = x.is_active ? '正常' : "异常"
      x.age = (x.age == null) ? 20 : x.age
      x.sex = (x.sex != null && x.sex == 0) ? "女" : "男"   //0表示女,1表示男
      x.school = (x.school == null) ? "广州大学附属小学" : x.school
      x.grade = (x.grade == null) ? "六年级" : x.grade
      x.class = (x.class == null) ? "一班" : x.class
      x.headteacher = (x.headteacher == null) ? "班主任" : x.headteacher
      x.name = (x.name == null) ? "家长" : x.name
      x.phone = (x.phone == null || x.phone == "") ? "12345678901" : x.phone
    })
    data.data = res.data
    data.total_pages = res.total_pages
    data.total_records = res.total_records
  })
}





const user = reactive<User>({ id: undefined, tag: '', index: -1, is_active: true })




const resetUser = () => {
  queryUser.id = undefined
  queryUser.tag = ''
  queryUser.index = -1
  queryUser.user_type = undefined
}

//更改用户权限
const dialogVisible = ref<boolean>(false)
const handleEdit = (index: number, row: any) => {
  user.index = index
  user.tag = row.tag
  user.id = row.id
  dialogVisible.value = true
}
const type = (tag: string) => {
  switch (tag) {
    case "超级管理员": return "danger"
    case "市级管理员": return "warning"
    case "区级管理员": return "info"
    case "普通用户": return "success"
  }
}
const filterTag = (value: string, row: any) => {
  return row.tag === value
}
const confirm = () => {
  if (data.data[user.index].tag === user.tag) return
  else {
    let rank: string = ''
    switch (user.tag) {
      case "超级管理员": rank = "super_admin"; break
      case "市级管理员": rank = "high_admin"; break
      case "区级管理员": rank = "mid_admin"; break
      case "普通用户": rank = ""; break
    }
    AdminUpdateRank({ id: user.id as number, rank }).then((res: any) => {

      if (res.msg === 'user rank updated!') {
        data.data[user.index].tag = user.tag
        ElMessage.success("修改成功！")
      }
      dialogVisible.value = false
    })
  }
}


//注销用户
const dialogVisible2 = ref<boolean>(false)

const filterTag2 = (value: string, row: any) => {
  return row.active === value
}

const handleEdit2 = (index: number, row: any) => {
  user.index = index
  user.is_active = row.is_active
  user.id = row.id
  dialogVisible2.value = true
}
const UpdateActive = async () => {
  await AdminUpdateActive({ id: user.id as number }, user.is_active ? '0' : '1').then((res: any) => {
    if (res.code === 600015) {
      ElMessage.success("修改成功！")
      data.data[user.index].is_active = !data.data[user.index].is_active
      data.data[user.index].active = data.data[user.index].active === '正常' ? "异常" : "正常"
    }
  })
  dialogVisible2.value = false
}


const paginationFlag = ref<boolean>(true)


//根据id查用户
const queryUser = reactive<User>({ id: undefined, tag: '', index: -1, is_active: true })
const query = () => {
  if (queryUser.id === undefined) return
  UserSpecificID({ id: parseInt(queryUser.id as any) }).then((res: any) => {

    if (res.code === 611111) {
      if (res.user_info.super_admin) res.user_info.tag = "超级管理员"
      else if (res.user_info.high_admin) res.user_info.tag = "市级管理员"
      else if (res.user_info.mid_admin) res.user_info.tag = "区级管理员"
      else res.tag = "普通用户"

      data.data = []
      paginationFlag.value = false
      data.data[0] = res.user_info

    }
    else if (res.code === 600003) {
      paginationFlag.value = false
      data.data = []
    }
  })
}


const inputNum = (value: any) => {
  if (value == undefined) return;
  if (typeof value === 'number') return value
  return value
    .replace(/[^\d.]/g, "")
    .replace(/\.{2,}/g, ".")
    .replace(".", "$#$")
    .replace(/\./g, "")
    .replace("$#$", ".")
    .replace(/^\./g, "");
}
</script>

<template>
  <div>
    <el-row>
      <el-col :span="20" :offset="2">
        <div class="dw-table-form" style="padding-left: 60px;">
          <el-form :inline="true" class="dw-form-inline" :model="user">
            <el-form-item label="账号id:">
              <el-input placeholder="请输入查询的账号id" :oninput="queryUser.id = inputNum(queryUser.id)"
                v-model="queryUser.id"></el-input>
            </el-form-item>
            <el-form-item label="用户名:">
              <el-input placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="身份:">
              <el-input placeholder="请选择身份"></el-input>
            </el-form-item>
            <el-form-item label="年龄:">
              <el-input placeholder="请输入年龄"></el-input>
            </el-form-item>
            <el-form-item label="性别:">
              <el-input placeholder="请选择性别"></el-input>
            </el-form-item>
            <br><br>
            <el-form-item label="学校:">
              <el-input placeholder="请选择学校"></el-input>
            </el-form-item>
            <el-form-item label="年级:">
              <el-input placeholder="请选择年级"></el-input>
            </el-form-item>
            <el-form-item label="班级:">
              <el-input placeholder="请选择班级"></el-input>
            </el-form-item>
            <el-form-item label="班主任姓名:">
              <el-input placeholder="请输入班主任姓名"></el-input>
            </el-form-item>
            <el-form-item style="margin-left: 20px;">
              <el-button @click="resetUser">重置</el-button>
              <el-button type="primary" @click="query"> 查询</el-button>
              <el-button type="primary" @click="filter(1)">查看所有</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="dw-table">
          <div class="dw-table-title">
            <el-row :span="24" type="flex" justify="space-between" align="middle">
              <el-col :span="4">
                <h3>用户管理</h3>
              </el-col>
              <el-col :span="20" style="text-align: right;">
                <el-button type="primary" disabled>添加用户</el-button>
              </el-col>
            </el-row>
          </div>
          <el-table stripe style="width: 100%" :data="data.data">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="用户名" prop="username" />
            <el-table-column label="id" prop="id" />
            <el-table-column label="年龄" prop="age" />
            <el-table-column label="性别" prop="sex" />
            <el-table-column label="学校" prop="school" />
            <el-table-column label="年级" prop="grade" />
            <el-table-column label="班级" prop="class" />
            <el-table-column label="班主任姓名" prop="headteacher" />
            <el-table-column label="家长/本人姓名" prop="name" />
            <el-table-column label="家长/本人电话" prop="phone" />




            <el-table-column prop="tag" label="身份" :filters="[
              { text: '超级管理员', value: '超级管理员' },
              { text: '市级管理员', value: '市级管理员' },
              { text: '区级管理员', value: '区级管理员' },
              { text: '普通用户', value: '普通用户' },
            ]" :filter-method="filterTag" filter-placement="bottom-end">
              <template #default="scope">
                <el-tag :type="type(scope.row.tag)" disable-transitions>{{ scope.row.tag }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="tag" label="状态" :filters="[
              { text: '正常', value: '正常' },
              { text: '注销', value: '注销' }
            ]" :filter-method="filterTag2" filter-placement="bottom-end">
              <template #default="scope">
                <el-tag :type="scope.row.active === '正常' ? 'success' : 'danger'" disable-transitions>{{ scope.row.active
                }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="修改权限">
              <template #default="scope">

                <el-button size="small" type="danger" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              </template>
            </el-table-column>
            <el-table-column label="注销用户">
              <template #default="scope">

                <el-button size="small" type="danger" @click="handleEdit2(scope.$index, scope.row)">操作</el-button>
              </template>
            </el-table-column>



          </el-table>
          <div class="dw-pagination">
            <pagination :total="data.total_records" @current-change="filter" v-if="paginationFlag"
              :pageCount="data.total_pages" />

          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog v-model="dialogVisible" title="注销用户" width="30%">
      <div class="mb-2 flex items-center text-sm">
        <el-radio-group v-model="user.tag" class="ml-4">
          <el-radio label="超级管理员" size="large" v-if="super_admin === 'true'">超级管理员</el-radio>
          <el-radio label="市级管理员" size="large" v-if="super_admin === 'true'">市级管理员</el-radio>
          <el-radio label="区级管理员" size="large">区级管理员</el-radio>
          <el-radio label="普通用户" size="large">普通用户</el-radio>
        </el-radio-group>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirm">
            确认修改
          </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible2" title="修改用户权限" width="30%">
      <div class="mb-2 flex items-center text-sm">
        是否{{ user.is_active ? '注销' : '恢复' }} id号为 {{ user.id }}的用户
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">否</el-button>
          <el-button type="primary" @click="UpdateActive">
            是
          </el-button>
        </span>
      </template>
    </el-dialog>


  </div>
</template>

<style scoped>
.dw-table-form {
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
}

.dw-table {
  background: white;
  padding: 20px;
}

.dw-table .dw-table-title {
  padding-bottom: 20px;
  border-bottom: 1px solid #f3f3f3;
}

.dw-table .dw-table-title h3 {
  padding: 0px;
  margin: 0px;
}

.el-form-item {
  margin-bottom: 0px;
}

.dw-dialog-form-item {
  margin-top: 20px;
}

.dw-pagination {
  padding-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>